/**
 * Created by dio on 2017/2/27 0027.
 */
import React from "react";
import {
    ActivityIndicator,
    Alert,
    Image,
    InteractionManager,
    ListView,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import GiftedListView from "react-native-gifted-listview";
import ModuleCommonHeader from "../module/ModuleCommonHeader";
import chjStyle from "../../CustomStyle";
import Util from "../Util";

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class CarsForAuctionUI extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
            isLoading: true,
            dataSource: ds.cloneWithRows([])
        };
        // 设置定时重复任务的示例
        // setInterval(()=>{}, 1000);
    }

    // 组件被加载时
    componentDidMount() {
        InteractionManager.runAfterInteractions(
            () => {
                this.setState({isLoading: false})
            }
        );
    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        if (this.state.isLoading) {
            return (<View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='拍卖二手车'/>
                <ActivityIndicator
                    animating={true}
                    style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                    size="large"/>
            </View>);
        }
        return (<View style={[chjStyle.mainContainer, {backgroundColor: '#f6f6f6'}]}>
                <ModuleCommonHeader
                    title='拍卖二手车'
                />
                <GiftedListView
                    style={chjStyle.mainList}
                    initialListSize={5}

                    rowView={this.renderRow.bind(this)}
                    onFetch={this.onFetch.bind(this)}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    paginationFetchigView={this.renderPaginationFetchigView}
                    paginationAllLoadedView={this.renderPaginationAllLoadedView}
                    paginationWaitingView={this.renderPaginationWaitingView}

                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android

                    withSections={false} // enable sections
                    refreshableTintColor="#999999"
                />
            </View>
        );
    }

    renderPaginationFetchigView() {
        return (
            <View style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={[chjStyle.baseText, {
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd'
                }]}>加载中..</Text>
            </View>
        );
    }

    renderPaginationAllLoadedView() {
        return (
            <View style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={[chjStyle.baseText, {
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: chjStyle.getActualFontSize(32)
                }]}>没有更多拍卖啦...</Text>
            </View>
        );
    }

    /// 渲染一个footer，需要点击事件
    renderPaginationWaitingView(paginateCallback) {
        return (
            <TouchableOpacity onPress={paginateCallback}
                              style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={[chjStyle.baseText, {
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: chjStyle.getActualFontSize(32)
                }]}>查看更多拍卖</Text>
            </TouchableOpacity>
        );
    }

    // shadowColor:'#333',
    // shadowOffset:{width:3, height:3},
    // shadowOpacity: 0.8,

    renderRow(rowData) {

        var isauction = rowData.isauction;
        if (isauction == 0) {
            var statusIcon = require('../../../img/statusWait.png');
            var statusStr = '还未开始';
        }
        else if (isauction == 1) {
            var statusIcon = require('../../../img/statusOpen.png');
            var statusStr = '拍卖中';
        }
        else {
            var statusIcon = require('../../../img/statusClosed.png');
            var statusStr = '拍卖结束';
        }

        var timeStr = '';

        var splitArray = rowData.auctionstartedtime.split(' ');
        splitArray = splitArray[1].split(':');
        timeStr += splitArray[0] + ':' + splitArray[1];
        timeStr += '-';

        splitArray = rowData.auctionendedtime.split(' ');
        splitArray = splitArray[1].split(':');
        timeStr += splitArray[0] + ':' + splitArray[1];

        return (<TouchableOpacity
                activeOpacity={1}
                onPress={() => this.onPressedItem(rowData)}
                style={{
                    width: chjStyle.getActualSizeInHorizontal(730),
                    height: chjStyle.getActualSizeInVertical(487),
                    borderRadius: chjStyle.getActualSizeInHorizontal(20),
                    marginLeft: chjStyle.getActualSizeInHorizontal(10),
                    marginRight: chjStyle.getActualSizeInHorizontal(10),
                    marginVertical: chjStyle.getActualSizeInHorizontal(10),
                    backgroundColor: '#fff',
                }}>
                <Image
                    style={{
                        position: 'absolute',
                        left: 0,
                        top: 0,
                        width: chjStyle.getActualSizeInHorizontal(730),
                        height: chjStyle.getActualSizeInVertical(485),
                        shadowRadius: 5
                    }}
                    resizeMode='stretch'
                    source={{uri: Util.ImgMiddleServicePath + rowData.logourl}}
                />
                <View
                    style={{
                        position: 'absolute',
                        backgroundColor: '#FF7200',
                        left: 0,
                        top: chjStyle.getActualSizeInVertical(277),
                        width: chjStyle.getActualSizeInHorizontal(730),
                        height: chjStyle.getActualSizeInVertical(71),
                    }}
                >
                    <Text
                        style={[chjStyle.baseText, {
                            position: 'absolute',
                            color: '#fff',
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontSize: chjStyle.getActualFontSize(30),
                            left: chjStyle.getActualSizeInVertical(20),
                            top: chjStyle.getActualSizeInVertical(12),
                            width: chjStyle.getActualSizeInHorizontal(730),
                            height: chjStyle.getActualSizeInVertical(88),
                        }]}
                    >拍卖时间</Text>
                    <Text
                        style={[chjStyle.baseText, {
                            position: 'absolute',
                            color: '#fff',
                            fontWeight: '500',
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontSize: chjStyle.getActualFontSize(40),
                            left: chjStyle.getActualSizeInVertical(160),
                            top: chjStyle.getActualSizeInVertical(6),
                            width: chjStyle.getActualSizeInHorizontal(730),
                            height: chjStyle.getActualSizeInVertical(88),
                        }]}
                    >{timeStr}</Text>

                </View>

                <View
                    style={{
                        position: 'absolute',
                        backgroundColor: '#fff',
                        left: 0,
                        top: chjStyle.getActualSizeInVertical(347),
                        width: chjStyle.getActualSizeInHorizontal(730),
                        height: chjStyle.getActualSizeInVertical(140),
                    }}
                >
                    <Text
                        numberOfLines={2}
                        style={[chjStyle.baseText, {
                            position: 'absolute',
                            color: '#999',
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontSize: chjStyle.getActualFontSize(18),
                            left: chjStyle.getActualSizeInVertical(20),
                            top: chjStyle.getActualSizeInVertical(6),
                            width: chjStyle.getActualSizeInHorizontal(380),
                            height: chjStyle.getActualSizeInVertical(88),
                        }]}
                    >车辆编号:{rowData.carid}</Text>
                    <Text
                        numberOfLines={2}
                        style={[chjStyle.baseText, {
                            position: 'absolute',
                            color: '#333',
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontSize: chjStyle.getActualFontSize(36),
                            left: chjStyle.getActualSizeInVertical(20),
                            top: chjStyle.getActualSizeInVertical(30),
                            width: chjStyle.getActualSizeInHorizontal(380),
                            height: chjStyle.getActualSizeInVertical(88),
                        }]}
                    >{rowData.carbrand + ' ' + rowData.carseries + ' ' + rowData.carmodel}</Text></View>

                <Image
                    style={{
                        position: 'absolute',
                        left: chjStyle.getActualSizeInHorizontal(392),
                        top: chjStyle.getActualSizeInVertical(347),
                        width: chjStyle.getActualSizeInHorizontal(338),
                        height: chjStyle.getActualSizeInVertical(140),
                        shadowRadius: 5
                    }}
                    source={require('../../../img/PriceBG.png')}
                />

                <Image
                    style={{
                        position: 'absolute',
                        left: chjStyle.getActualSizeInHorizontal(505),
                        top: chjStyle.getActualSizeInVertical(0),
                        width: chjStyle.getActualSizeInHorizontal(227),
                        height: chjStyle.getActualSizeInVertical(50),
                        shadowRadius: 5
                    }}
                    resizeMode='stretch'
                    source={statusIcon}
                />

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#fff',
                        fontWeight: '600',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0,0,0,0)',
                        fontSize: chjStyle.getActualFontSize(24),
                        right: chjStyle.getActualSizeInVertical(60),
                        top: chjStyle.getActualSizeInVertical(8),
                        width: chjStyle.getActualSizeInHorizontal(227),
                    }]}
                >{statusStr}</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#fff',
                        fontWeight: '600',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0,0,0,0)',
                        fontSize: chjStyle.getActualFontSize(56),
                        right: chjStyle.getActualSizeInVertical(30),
                        top: chjStyle.getActualSizeInVertical(380),
                        width: chjStyle.getActualSizeInHorizontal(200),
                        height: chjStyle.getActualSizeInVertical(88),
                    }]}
                >{rowData.presaleprice}万</Text>
            </TouchableOpacity>
        );
    }

    onPressedItem(rowData) {
        /*   this.props.mainNavigator.push(
            {
         title: 'AuctionDetail',
         component: AuctionDetail,
         data: rowData,
                configure: {
                    ...Navigator.SceneConfigs.HorizontalSwipeJump,
                    gestures: {
                        pop: {}
                    }
                }
            }
         );*/
    }

    onFetch(page = 1, callback, options) {
        const user = Util.getUser();
        var params = {
            token: user.token,
            useid: user.id,
            page: page,
            pagesize: 20
        };

        Util.postServer('user/queryauctionlist', params,
            (result) => {
                callback(result.data.pagebean.list, {
                    allLoaded: result.data.pagebean.list.length == 0,
                });
            },
            (msg) => {
                Alert.alert('错误', '你的网络堵车啦..' + msg);
                callback();
            }
        );
    }
}

